<template>
  <div id="CesiumContainer" ref="CesiumContainer"></div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import * as Cesium from 'cesium'

let router = useRouter()

Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZmU5NTMwMS0xNDQ3LTRjODUtOTU4YS04NzVlNTdkODBhYWIiLCJpZCI6MjM3NTY3LCJpYXQiOjE3MjQ4Mzc2NjZ9.MORLe07Q4vKs2ZDO9pXxX-1MxoyLgKraBWwlNb7hi0s";

let cesium = {
  viewer: null,
};

const initCT = () => {
  cesium.viewer = new Cesium.Viewer("CesiumContainer", {
    // useDefaultRenderLoop: false,
    homeButton: false, // home按钮
    sceneModePicker: false, // 选择3d/2d
    baseLayerPicker: false, // 影像切换
    animation: false, // 是否显示动画控件 左下角仪表
    infoBox: false, // 是否显示点击要素之后显示的信息
    selectionIndicator: false, // 要素选中框
    geocoder: false, // 是否显示地名查找控件
    timeline: false, // 是否显示时间线控件
    fullscreenButton: false, // 全屏按钮
    shouldAnimate: false, // 是否开启动画
    navigationHelpButton: false, // 是否显示帮助信息控件
    animate: false,
    timeline: false,
    navigationInstructionsInitiallyVisible: false,
    allowTextureFilterAnisotropic: false,
    contextOptions: {
      webgl: {
        alpha: false,
        antialias: true,
        preserveDrawingBuffer: true,
        failIfMajorPerformanceCaveat: false,
        depth: true,
        stencil: false,
        anialias: false
      }
    },
    targetFrameRate: 60,
    resolutionScale: 0.1,
    orderIndependentTranslucency: true,
    automaticallyTrackDataSourceClocks: false,
    dataSources: null,
    clock: null,
    terrainShadows: Cesium.ShadowMode.DISABLED
  })

  cesium.viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权信息
  cesium.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) // 禁用双击
  cesium.viewer.entities.removeAll()

  cesium.viewer.scene.screenSpaceCameraController.enableRotate = false // 禁用旋转
  cesium.viewer.scene.screenSpaceCameraController.enableZoom = false // 禁用缩放
  cesium.viewer.scene.screenSpaceCameraController.enableTilt = false // 禁用中键旋转视角
  cesium.viewer.scene.screenSpaceCameraController.enableTranslate = false // 禁止移动

  window.cesium = cesium

  cesium.viewer.camera.setView({
    destination: {
      x: 518976.5542229833, // -2523355.235806704,
      y: 7437673.855007478,// 7731150.9445240935,
      z: 3258139.5732106385// 438971.93250270747,
    },
    orientation: {
      heading: 0.020709146240220022, // 0.030142776718315112, // 方向
      pitch: -0.6707780700823931, //-0.6726499441456775, // 视角
      roll: 6.283138705605887, // 6.283066728733684, // 倾斜角度
    },
  })

  let isCesiumLoad = true

  let helper = new Cesium.EventHelper()
  let Load = helper.add(cesium.viewer.scene.globe.tileLoadProgressEvent, e => {
    if (e == 0 && isCesiumLoad && router.currentRoute.value.path == '/') {
      isCesiumLoad = false
      setTimeout(() => {
        router.push('/homePage')
        Load()
      }, 1)
    }
  })
}

onMounted(() => {
  initCT()
})
</script>

<style scoped></style>
